<template>
  <div id="riskAssessment">
    <div class="information">
      <div class="informationTop">
        <span><i class="el-icon-document"></i><span>流程示意图</span></span>
      </div>
      <div class="informationBottom">
        <el-steps :active="1" align-center finish-status="success" simple style="margin-top: 20px">
          <el-step title="选择关键技术" description=""></el-step>
          <el-step title="选择专家组" description=""></el-step>
          <el-step title="开展评估" description=""></el-step>
          <el-step title="结果展示" description=""></el-step>
        </el-steps>
      </div>
    </div>
    <div class="risk">
      <div class="informationTop">
        <span><i class="el-icon-data-analysis"></i><span>选择专家</span></span>
      </div>
      <div>
        <addzjz
          v-for="(item, index) in items"
          :olddata="item"
          :key="index"
          :index="index"
          @deleteIndex="del"
          @uploadData="getData"
          ref="a"
        >
        </addzjz>
      </div>
      <div class="addzjz">
        <el-button class="generalButton" icon="el-icon-plus" @click="add"
          >新增专家组</el-button
        >
      </div>
      <div class="button">
        <el-button @click="save">暂存</el-button>
        <el-button class="generalButton" @click="submitBtn">取消</el-button>
        <el-button @click="next">下一步</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getAddzjz, selectZjz, getsavezjz,cancle } from "api/jscsdpg";
import addzjz from "./step/addzjz";
import { Message } from "element-ui";

export default {
  components: {
    addzjz,
  },
  data() {
    return {
      id: "",
      gjjs: [],
      items: [],
      active: 0,
    };
  },
  methods: {
    showdata() {
      if (this.$route.query.data != undefined) {
        this.olddata = JSON.parse(this.$route.query.data);
        console.log(this.olddata);
        if (this.olddata != undefined) {
          this.items = this.olddata;
        }
      }
    },
    save() {
      let chil = this.$refs.a;
      let zjid = "";
      if (chil != undefined) {
        chil.forEach((element) => {
          element.tableData.forEach((el) => {
            zjid = zjid + el.id + ",";
          });
          zjid = zjid + ";";
        });
      }
      console.log(zjid);
      if (zjid != undefined && zjid != "" && zjid != ";") {
        selectZjz(
          this.id,
          {
            ids: zjid,
          },
          0
        ).then((res) => {
          this.$router.push({
            path: "/assessManagement",
          });
        });
      } else {
        Message({
          message: "未选择专家",
          type: "error",
          duration: 5 * 1000,
        });
      }
    },
    add() {
      this.items.push([]);
    },
    del: function (index) {
      console.log(index);
      if (index !== 0) {
        this.items.splice(index, 1);
        console.log("deleted:", JSON.stringify(this.items));
      }
      if (index == 0) {
        console.log("index = 0");
        this.items = [];
      }
    },
    next() {
      let chil = this.$refs.a;
      let zjid = "";
      if (chil != undefined) {
        chil.forEach((element) => {
          element.tableData.forEach((el) => {
            zjid = zjid + el.id + ",";
          });
          zjid = zjid + ";";
        });
      }
      console.log(zjid);
      if (zjid != undefined && zjid != "" && zjid != ";") {
        selectZjz(
          this.id,
          {
            ids: zjid,
          },
          1
        ).then((res) => {
          this.$router.push({
            path: "/step3",
            query: {
              id: this.id,
            },
          });
        });
      } else {
        Message({
          message: "未选择专家",
          type: "error",
          duration: 5 * 1000,
        });
      }
    },
    //提交按钮
    submitBtn() {
      cancle(this.id).then((res) => {
        this.$router.push({
          path: "/assessManagement",
        });
      });
    },
    getData: function (val) {
      let index = val.index;
      this.items[index] = val.data;
      console.log("I got the data:", JSON.stringify(this.items));
    },
  },
  mounted() {
    // console.log(this.$route.query);
    this.id = this.$route.query.id;
    this.showdata();
  },
};
</script>

<style lang="less" scoped>
#riskAssessment {
  color: #000;
  padding: 1.4286rem;
}
.information {
  padding-bottom: 1.5rem;
}
.informationTop {
  background: #f7f7f7;
  padding: 0.2857rem;
  border-bottom: 1px solid #e9e9e9;
  span {
    padding: 0.5rem;
    color: #81a9c8;
  }
}
.informationBottom {
  background: #fff;
  display: flex;
  padding: 1.5rem 0;
  width: 100%;
  //   align-items: center;
  //   justify-content: space-around;
}
.informationBottom .el-steps {
  width: 100%;
}
.informationBottom-left {
  display: flex;
  align-items: center;
  flex-direction: column;
  span {
    padding-bottom: 1.5rem;
  }
}
.informationBottom-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  span {
    padding-bottom: 1.5rem;
  }
}
.importance {
  padding: 1.0714rem;
  background: #fff;
}
.importanceTop {
  margin-left: 2.5rem;
  color: #9abfdb;
  padding-bottom: 0.5rem;
  span {
    padding-bottom: 0.4286rem;
    border-bottom: 2px solid #719dc0;
  }
}
.el-table td,
.el-table th.is-leaf,
.el-table--border,
.el-table--group {
  border-color: #bde1fc;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: #bde1fc;
}
.table {
  padding-bottom: 1.1429rem;
}
.bottom {
  display: flex;
  span {
    padding-left: 3rem;
    width: 80.0006px;
    display: flex;
  }
}
.button {
  padding-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.addzjz {
  margin-left: 40%;
}
#foot {
  margin-top: 0.833333rem;
}
</style>